<template>
  <div class="resTable">
        <el-table
            ref="multipleTable"
            :data="resources"
            tooltip-effect="dark"
            style="width: 1300px"
            @selection-change="handleSelectionChange">
            <el-table-column
            align="center"
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column
            align="center"
            prop="order"
            label="序号"
            width="120">
            </el-table-column>
            <el-table-column
            align="center"
            prop="fatherNode"
            sortable
            label="父亲节点"
            width="120">
            </el-table-column>
            <el-table-column
            align="center"
            prop="childNode"
            sortable
            label="子节点"
            width="120">
            </el-table-column>
            <el-table-column
            align="center"
            prop="url"
            label="URL"
            width="120">
            </el-table-column>
            <el-table-column
            align="center"
            prop="api"
            label="API"
            width="120">
            </el-table-column> 
            <el-table-column
            align="center"
            prop="type"
            label="资源类型"
            width="120">
            </el-table-column>
            <el-table-column
            align="center"
            prop="openIcon"
            label="打开图标"
            width="120">
                <template slot-scope="scope">
                    <i :class="scope.row.openIcon"></i>
                </template>
            </el-table-column>
            <el-table-column
            align="center"
            prop="closeIcon"
            label="关闭图标"
            width="120">
                <template slot-scope="scope">
                    <i :class="scope.row.closeIcon"></i>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="primary"
                    @click="handleDelete(scope.$index, scope.row)">复制</el-button>
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="100">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    name:"resourceTable",
    data() {
        return {
            resources:[
                {
                    order:1,
                    fatherNode:"hhh",
                    childNode:"hhh",
                    url:"././ResourceIndex.vue",
                    api:"/messages",
                    type:"菜单",
                    openIcon:"el-icon-open",
                    closeIcon:"el-icon-turn-off",
                },
                {
                    order:1,
                    fatherNode:"hhh",
                    childNode:"hhh",
                    url:"././ResourceIndex.vue",
                    api:"/messages",
                    type:"菜单",
                    openIcon:"el-icon-open",
                    closeIcon:"el-icon-turn-off",
                },
                {
                    order:1,
                    fatherNode:"hhh",
                    childNode:"hhh",
                    url:"././ResourceIndex.vue",
                    api:"/messages",
                    type:"菜单",
                    openIcon:"el-icon-open",
                    closeIcon:"el-icon-turn-off",
                }
            ],
            currentPage: 1,
        }
    }
}
</script>

<style>

</style>